<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入您的搜索内容：
	<input type="text" oninput="changeSearch(this.value)" onpropertychange="changeSearch(this.value)"/>
	<table id="addr">

	</table>
	<script type="text/javascript">
		window.onload = function changeSearch(value){
				var xhr = new XMLHttpRequest();
				xhr.open("get", "http://localhost:9090/ajaxTest/ajax?search="+value, true);
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						var address = [];
						address = JSON.parse(xhr.responseText);
						showMatchAddr(address, document.getElementById("addr"));
					}	
				};
				xhr.send(null);
		};	
		function showMatchAddr(list,table){
			table.innerHTML = "";
			list.forEach((item, index)=>{
				var tr = document.createElement("tr");
				var td = document.createElement("td");
				td.innerHTML = item.name;
				tr.appendChild(td);
				table.appendChild(tr);
			});
		}
	</script>
</html>